<template>
  <div class="form">
    <div class="formClassLeft">
      <p
        :key="index"
        v-for="(i, index) in leftData"
        @click="clickP(index)"
        :class="active == index ? 'chioseClass' : ''"
      >
        {{ i.taskName }}
      </p>
    </div>
    <div class="formClass" v-if="taskType != 'view'">
      <fc-designer
        ref="designer"
        height="calc(100vh - 312px)"
        @save="handleSave"
        :config="config"
      />
    </div>
    <div class="formClass" v-if="taskType == 'view'">
      <!-- <FormCreate :rule="rule"></FormCreate> -->
      <form-create
        :rule="rule"
        :option="options"
        @submit="onSubmit"
        :disabled='formDisabled'
        v-model:api="fApi"
      ></form-create>
    </div>
  </div>
</template>

<script setup name="formBuild">
import { nextTick } from "vue";
import { reactive, toRefs, ref, getCurrentInstance, onMounted, useAttrs } from "vue";
import FcDesigner from '@form-create/designer'
import MyButton from './components/MyButton';
import Signature from './components/Signature';

FcDesigner.component('MyButton', MyButton);
FcDesigner.component('Signature', Signature);

import {buttonRule,SignatureRule} from './components/components.js'
const attrs = useAttrs();
//  import { getPropertiesByid,updateProperties } from "你的请求接口地址";
const { proxy } = getCurrentInstance();
const active = ref(0);
const leftData = ref([]);
const fApi = ref(null);
const data = reactive({
  config: {
    //是否显示保存按钮
    // showSaveBtn: true,
    fieldReadonly: false,
    //隐藏拖拽操作按钮
    hiddenDragMenu: false,
    //隐藏拖拽按钮
    hiddenDragBtn: false,
    //是否显示右侧的配置界面
    showConfig: true,
    //是否显示组件的基础配置表单
    showBaseForm: true,
    //是否显示组件联动
    showControl: true,
    //是否显示模块管理
    showPageManage: true,
    //是否显示组件的高级配置表单
    showAdvancedForm: true,
    //是否显示组件的属性配置表单
    showPropsForm: true,
    //是否显示组件的样式配置表单
    showStyleForm: true,
    //是否显示组件的事件配置表单
    showEventForm: true,
    //是否显示组件的验证配置表单
    showValidateForm: true,
    //是否显示json预览按钮
    showJsonPreview: true,
    //是否显示自定义props按钮
    showCustomProps: true,
    //是否显示多语言配置
    showLanguage: true,
    //是否显示表单配置
    showFormConfig: true,
    //是否显示左侧的模板列表
    showTemplate: true,
    //是否显示多端适配选项
    showDevice: true,
    // 要隐藏的组件
    hiddenItem: ['slider', 'colorPicker','cascader','elTransfer','tree','elTreeSelect','fcValue','html'],
    // 输入框 - input
    // 多行输入框 - textarea
    // 密码输入框 - password
    // 计数器 - inputNumber
    // 单选框 - radio
    // 多选框 - checkbox
    // 选择器 - select
    // 开关 - switch
    // 评分 - rate
    // 时间 - timePicker
    // 时间区间 - timeRange
    // 滑块 - slider
    // 日期 - datePicker
    // 日期区间 - dateRange
    // 颜色选择器 - colorPicker
    // 级联选择器 - cascader
    // 上传 - upload
    // 穿梭框 - elTransfer
    // 树形控件 - tree
    // 树形选择 - elTreeSelect
    // 富文本框 - fcEditor
    // 数据表格 - dataTable
    // 子表单 - group
    // 分组 - subForm
    // 分步表单 - stepForm
    // 计算公式 - fcValue
    // 表格表单 - tableForm
    // 嵌套表单 - nestedTableForm
    // 无限级表单 - infiniteTableForm
    // 提示 - elAlert
    // 按钮 - elButton
    // 文字 - text
    // HTML - html
    // 分割线 - elDivider
    // 标签 - elTag
    // 链接 - elLink
    // 文字提示 - elTooltip
    // 水印 - elWatermark
    // 栅格布局 - fcRow
    // 表格布局 - fcTable
    // 盒子布局 - fcFlex
    // 标签页 - elTabs
    // 间距 - space
    // 卡片 - elCard
    // 折叠面板 - elCollapse
    // 描述列表 - elDescriptions
    // 弹出框 - fcDialog
    // 抽屉 - fcDrawer
    // 三列栅格 - col3
    // 四列栅格 - col4
    // 四行三列表格 - table43
    // 金额 - chineseAmount
    // 时长 - duration
  },
});

const rule = ref();
const options = ref();
const taskType = ref();
const formDisabled = ref(false)
// 可以在此处获取设计器实例或进行其他操作
const designer = ref(null);
const { config } = toRefs(data);
/** 查询设计表单以前数据 */
function getProperties() {
  // getPropertiesByid(id.value).then(res => {
  //   const aa = {
  //     rule: '[{"type":"tableForm","field":"Fg1xm6vlrod0abc","title":"","info":"","props":{"columns":[{"label":"名称","required":false,"style":{"width":"auto"},"rule":[{"type":"input","field":"Fxj5m6vlrthgakc","title":"输入框","info":"","$required":false,"_fc_id":"id_F8nrm6vlrthgalc","name":"ref_Fqifm6vlrthgamc","display":true,"hidden":false,"_fc_drag_tag":"input"}]},{"label":"是否合格","required":false,"style":{"width":"auto"},"rule":[{"type":"radio","field":"Fa8om6vlruz7anc","title":"单选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"合格","value":"1"},{"label":"不合格","value":"2"}],"_fc_id":"id_F2bam6vlruz7aoc","name":"ref_Fm7jm6vlruz7apc","display":true,"hidden":false,"_fc_drag_tag":"radio"}]},{"label":"批次","required":false,"style":{"width":"auto"},"rule":[{"type":"checkbox","field":"F456m6vlrw4kaqc","title":"多选框","info":"","effect":{"fetch":""},"$required":false,"options":[{"label":"1","value":"1"},{"label":"2","value":"2"},{"label":"3","value":"3"}],"_fc_id":"id_Fosfm6vlrw4karc","name":"ref_Fq3wm6vlrw4kasc","display":true,"hidden":false,"_fc_drag_tag":"checkbox"}]}]},"_fc_id":"id_Fav2m6vlrod0acc","name":"ref_Fi26m6vlrod0adc","display":true,"hidden":false,"_fc_drag_tag":"tableForm"}]',
  //     options:
  //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"125px"},"language":{},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
  //   };
  nextTick(() => {
    //回显数据
    if (taskType.value == "view") {
      // eslint-disable-next-line no-undef
      rule.value = formCreate.parseJson(leftData.value[active.value].content.rule);
      // eslint-disable-next-line no-undef
      options.value = formCreate.parseJson(leftData.value[active.value].content.options);
      console.log(rule.value);
      return;
    }
    // eslint-disable-next-line no-undef
    proxy.$refs.designer.setRule(formCreate.parseJson(leftData.value[active.value].content.rule));
    proxy.$refs.designer.setOptions(
      // eslint-disable-next-line no-undef
      formCreate.parseJson(leftData.value[active.value].content.options)
    );
  });
}
/** 保存表单构建 */
function handleSave() {
  // fApi.value.submit()
  if (taskType.value != "view") {
    // eslint-disable-next-line no-undef
    leftData.value[active.value].content.rule = formCreate.toJson(proxy.$refs.designer.getRule());
    // eslint-disable-next-line no-undef
    leftData.value[active.value].content.options = formCreate.toJson(
      proxy.$refs.designer.getOption()
    );
  }

  // leftData.value[active.value].content = JSON.stringify(leftData.value[active.value].content)
}

function onSubmit(data) {
  console.log(data);
}
function clickP(index) {
  if (taskType.value == "view") {
    active.value = index;
    // eslint-disable-next-line no-undef
    rule.value = formCreate.parseJson(leftData.value[active.value].content.rule);
    // eslint-disable-next-line no-undef
    options.value = formCreate.parseJson(leftData.value[active.value].content.options);
    return;
  }
  // eslint-disable-next-line no-undef
  leftData.value[active.value].content.rule = formCreate.toJson(proxy.$refs.designer.getRule());
  // eslint-disable-next-line no-undef
  leftData.value[active.value].content.options = formCreate.toJson(
    proxy.$refs.designer.getOption()
  );
  // leftData.value[active.value].content = JSON.stringify(leftData.value[active.value].content)

  active.value = index;
  getProperties();
}
onMounted(async () => {
  const { data, taskInfo, type } = attrs;
  console.log(data);
  taskType.value = type;
  if(taskType.value == 'view'){
    formDisabled.value = true;
  }
  leftData.value = taskInfo || [];
  leftData.value.forEach((element) => {
    if (!element.content) {
      element.content = {
        rule: "[]",
        options: "{}",
      };
    }
  });
  console.log(leftData.value);
  getProperties();
  // 添加业务组件分组
  designer.value.addMenu({
    name: "custom",
    title: "自定义组件",
    list: [
      
    ],
  });
  console.log(designer.value.menuList);
  designer.value.addComponent(buttonRule);
  designer.value.addComponent(SignatureRule);
});
defineExpose({ handleSave, leftData, onSubmit });
</script>
<style lang="scss" scoped>
.form {
  display: flex;
  justify-content: flex-start;
  .formClassLeft {
    width: 150px;
    p {
      cursor: pointer;
    }
  }
}
.formClass {
  flex: 1;
}
.formClass ._fc-l-menu {
  display: none !important;
}
.chioseClass {
  color: #0044a0;
}
</style>
